<template lang="html">  
  <div   id="index"  > 
     
    <div class="entry-list-container bre-float-left bre-margin-bottom bre-padding-0 ">
      <a-layout-content :xl="24">
        <!-- <a-row > <a-col style="padding:10px 10px"  :span="24"> <div>  <a href="#">最新</a> <a-divider type="vertical" /> <a href="#">热门</a> <a-divider type="vertical" /> <a href="#">转载</a> </div> </a-col> </a-row> -->
              <HomeList   > </HomeList>
              
      </a-layout-content>
    </div>
    <div class=" author-block bre-float-left"> 
      <AuthorBlock  ></AuthorBlock>
      <div class="bre-content-bg bre-margin-bottom" style="text-align: center;padding: 10px ; font-size: 12px;"> 
 
      </div> 
      <a-layout-footer  class="bre-padding-0 about-block "  >
        <div>
      <a-row>
      <a-col :span="24">
           <a href="https://beian.miit.gov.cn/">备案号:桂ICP备18012157号</a>
      </a-col> 
    </a-row>
     <a-row>
       <a-col :span="24">
           <a href="http://api.breakon.top/">爬虫地址</a>
      </a-col> 
      <a-col :span="24">
        <router-link to="/article/1">关于:版本1.1.2</router-link>
      </a-col>  
    </a-row>
           <section class="container" >   </section>
        </div>
      </a-layout-footer>
    </div> 
    <!-- <div style="height: 400px; background: rgb(51, 51, 51); width: 25%; float: right;" ></div> -->
    <div style="clear: both;"></div>  
     </div>
</template>
 
<script>
import HomeList from "./HomeList"; //列表
import AuthorBlock from "./HomeAuthorBlock"; //作者
import { useStore } from "vuex";
// import {   h, ref } from "vue";

export default {
  name: "index", 
  components: {
    HomeList,
    AuthorBlock,
  },
  data() {
    return {
      listLoading: true,
      homeListData: {},
      // {listData1:[]}
    };
  },
  setup() {
    let $store = useStore();
    $store.commit("setHomeNav", { status: 0 }); //显示 
  

    return { 
    };
  },
};
</script>

<style lang="scss" scoped>
#components-layout-demo-top-side {
  background-size: cover;
}
.about-block {
  background-color: rgba(255, 255, 255, 0);
  a {
    color: #8590a6;
    font-size: 10px;
  }
}

.author-block {
  width: 240px;
}

.entry-list-container {
  margin-right: 10px;
  width: 710px;
}

@media (max-width: 960px) {
  .entry-list-container {
    width: 100%;
    margin-right: 10px;
    padding: 0 5px 5px 5px;
  }

  .author-block {
    display: none;
  }
}

.ant-menu-item-selected-no {
  background-color: rgba(255, 255, 255, 0) !important;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}


// canvas {
//   -webkit-transform: translate3d(0, 0, 0);
//   display: block;
//   height: 100%;
//   width: 100%;
//   background: #fff;
//   user-select: none;
// }
</style>
 